<template>
  <Card :bordered="false" style="margin-top:20px">
    <p slot="title">
      分类
      <span class="clear" @click="changeClass('')">全部</span>
    </p>

    <template v-for="item in art_class">
      <div
        :key="item.id"
        :class="['list_item',class_id == item.id? 'active':'']"
        style="padding:4px"
        @click="changeClass(item.id)"
      >
        <span style="margin-left:2px">{{item.name}}</span>
        <Badge :count="item.art_number" class-name="demo"></Badge>
      </div>
    </template>
  </Card>
</template>

<script> 
import { mixin } from "@/utils/mixin";
export default {
  mixins: [mixin],
  data() {
    return {
        class_id:null
    
    };
  },
  methods: {
    changeClass(id){
      this.class_id = id;
      this.$emit('changeClass',id)
    }
  }
};
</script>

<style lang="less" scoped>
.list_item {
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  border-bottom: 1px solid transparent;
  font-weight: bold;
  &:hover {
    border-bottom: 1px solid #3963bc;
  }
}
.active {
  background-color: #3963bc;

  span {
    color: #fff;
  }
}

/deep/.demo {
  background: #3963bc !important;
}
</style>